import React from 'react'


const title = '03.Tab标签切换'
const datalist = [{
    username: 'laoxie',
    hobby: '大保健'
}, {
    username: 'jinjing',
    hobby: '跟着laoxie去大保健'
}, {
    username: 'lemon',
    hobby: '一边大保健一边做月饼'
}];


class Tab extends React.Component {
    constructor() {
        super();

        // 当前组件的状态（初始）
        this.state = {
            current: 0
        }
    }
    render() {
        console.log('Tab.render')

        // ES6结构
        const { current } = this.state;
        

        return (
            <div>
                <h1>{title}</h1>
                <ul className="nav nav-tabs mt-5">
                    {
                        datalist.map((item, idx) => {
                            return (
                                <li className="nav-item" key={item.username} onClick={() => {
                                    this.setState({
                                        current: idx
                                    })
                                }}>
                                    <a className={"nav-link" + (idx === current ? ' active' : '')}>{item.username}</a>
                                </li>
                            )
                        })
                    }
                </ul>
                <div className="p-3">
                    {
                        datalist.map((item, idx) => (
                            <div key={item.username} style={{ display: idx === current ? 'block' : 'none' }}>
                                爱好：{item.hobby}
                            </div>
                        ))
                    }
                </div>
            </div>
        )
    }
}

export default Tab;